February 9, 2024
Quarto for academic websites
QuartoGitHub PagesIntroduce and define yourself
Information on publications AND current projects
Describe your teaching experience
Describe your teaching experience
Make it interesting!
Make it interesting!
Make it interesting!
Pricing (CAD) for basic plan that includes domain name (i.e. yourname.com)
Design quality and inclusions are proportional to price!
WordPress and Weebly have free options without custom domain
GitHub is free with domain name username.github.io…
… but requires coding
You can purchase a domain name directly from the last slide’s website template providers
OR you can purchase a domain separately from a domain registrar
Options include:
Quarto?Three building blocks of a website:
htmlcssJavaScript (not needed for a static site)Static site generators: convert easy-to-write Markdown to html for use in a static website
Jekyll, Hugo, GatsbyThere are other R packages like distill and blogdown that let you do this too
Quarto is a new Markdown based way to generate static webite contentQuarto?RMarkdown beyond R (support for Python, Julia, Observable)pandoc):
Create a new project in RStudio
Select “new project” from upper right corner of GUI
Select “new directory”
Select “Quarto website”
Give the directory a name
GitHub repository as wellGitHub, make sure you name the project/repository username.github.ioPick somewhere to save the entire project
You will now have a folder with several (mostly blank) files:
_quarto.yml: config file with common yaml information for all the pages in your site
styles.css: where you can put design settings written in css
css (“cascading style sheets”) are the main styling system for the entire internetscss (Sass) for customization instead!You will now have a folder with several (mostly blank) files:
index.qmd: your site’s landing page
about.qmd: an initial page on your site
yamlYou already have the basics for a site!
Click Build > Render Website to convert all of your quarto files into html output in the docs folder
A preview version should open up in RStudio
GitHub Pages (to be continued…)You can change the appearance of your site to one of the pre-made “Bootswatch” themes (css someone else already wrote)
cosmoluxmintyslateyetizephyrtheme: zephyr or another theme of your choiceMarkdownYou can use Markdown syntax to edit your landing page
For example:
# for top-level headers, ## for second-level headers etc.-1. etc[text](https://link.com)1MarkdownMarkdown to your site and rendering it## Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Sed at nulla lobortis, faucibus nisi et, tempor dui.
- Fusce quis nulla sodales, ultricies arcu vitae, bibendum est.
Donec neque justo, vulputate vel velit ut, pulvinar suscipit nibh.
1. Nullam risus erat, consectetur quis libero in, condimentum accumsan quam.
Maecenas egestas pulvinar lobortis.For easier layout options, make pages into “About” pages
To do this, you will add an about option to the yaml of the page you want to change (not _yaml.qmd!)
You will need to pick one of 5 templates for your About page:
jollatrestlessolanamarqueebroadsideindex.qmd an “About” page using template: jollaimage: profile.jpgGitHub or files like your CV1You can make new pages by creating new .qmd files in the project directory
Try making a new quarto file called research.qmd1
You can add content using Markdown as before
_quarto.yaml fileIn your RStudio project:
_quarto.yml and set output-dir: docsAdd an empty text file to the project directory and name it .nojekyll
Render site using Build > Render Website
GitHub setup (manual)Create a repository in your GitHub account that has the same name as your RStudio project
From within the new repository, select Add file > Upload files and upload the entire contents of the project directory
Every time you want to edit your site you will need to:
Build > Render WebsiteGitHubgit and RStudioHaven’t used git directly from RStudio before?
usethis::create_github_token()gitcreds::gitcreds_set()GitHub setup (usethis)Set up your project for git tracking by running usethis::use_git()
Create a corresponding repository on GitHub by running usethis::use_github()
Every time you want to edit your site you will need to:
Build > Render WebsiteGit tabCommit and adding a messagePushGitHub Pages setupIn the repository page on github.com:
Go to the “Settings” tab in the top menu bar
Then select “Pages” from the left menu bar
Set branch to main or master1 and selected folder to /docs and save
The url will change when the page is fully deployed
Go to the “Actions” tab in the top menu bar to see the deployment status
pandocMarkdown is supposed to be easy to readpandoc syntax.columns divWant to customize colors, fonts, and more? Use Sass!
theme: [journal, styles.scss]How:
.scss and add it to the theme setting in your _yaml.qmd file/*-- scss:defaults --*//*-- scss:rules --*/scss:defaults/*-- scss:defaults --*/
// import a font from google
@import url('https://fonts.googleapis.com/css2?family=Merriweather&display=swap');
// set fonts for text
$font-family-sans-serif: "Merriweather", Palatino, FreeSerif, serif !default;
// document colors
$body-bg: #181818;
$body-color: white;
$link-color: #75AADB;
// code blocks
$code-block-bg-alpha: -.8;scss:rules to define additional css stylesTo use this style, you would type:
[highlighted phrase]{.highlight}
Which would produce: highlighted phrase
Guides to website setup:
Inspiration:
Use a custom domain name with GitHub Pages: